<template>
  <div class="app-container">
    <el-row :gutter="20" v-if="form!=undefined">
      <el-col :span="8" :offset="0">
        <el-card class="card-demo1" :body-style="{ padding: '20px' }">
          <div slot="header">
            <span>个人信息</span>
          </div>
          <!-- card body -->
          <div class="user-info-container">
            <div class="avatar-container">
              <el-avatar shape="square" :size="100" :src="src"></el-avatar>
            </div>

            <el-form ref="form" disabled :model="form" label-width="80px">
              <el-form-item label="昵称">
                <el-input v-model="form.username"></el-input>
              </el-form-item>
              <!-- 擦擦 -->
              <el-form-item label="性别">
                <el-select class="select-demo" v-model="form.sex" placeholder="性别">
                  <el-option label="男" value="0"></el-option>
                  <el-option label="女" value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="手机号码">
                <el-input v-model="form.phone"></el-input>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="form.email"></el-input>
              </el-form-item>
              <el-form-item label="QQ号码">
                <el-input v-model="form.QQ"></el-input>
              </el-form-item>
              <el-form-item label="住址">
                <el-input v-model="form.address"></el-input>
              </el-form-item>
              <el-form-item label="用户等级">
                <el-select class="select-demo" v-model="form.usertyp" placeholder="性别">
                  <el-option label="超级管理员" value="超级管理员"></el-option>
                  <el-option label="普通用户" value="普通用户"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
      <el-col :span="16" :offset="0">
        <el-card class="card-demo" :body-style="{ padding: '20px' }">
          <div slot="header">
            <span>信息修改</span>
          </div>
          <!-- card body -->
          <el-menu
            :default-active="index"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
          >
            <el-menu-item index="1">修改基本信息</el-menu-item>
            <el-menu-item index="2">修改密码</el-menu-item>
          </el-menu>
          <el-form v-if="index=='1'" :rules="rules" ref="form1" :model="form1" label-width="80px">
            <el-row>
              <el-col :span="12" :offset="0">
                <el-form-item label="昵称" prop="username">
                  <el-input @keyup.enter.native="submitForm('form1')" v-model="form1.username"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="0">
                <el-form-item label="性别" prop="sex">
                  <el-select class="select-demo" v-model="form1.sex" placeholder="性别">
                    <el-option label="男" value="0"></el-option>
                    <el-option label="女" value="1"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="0">
                <el-form-item label="手机号码" prop="phone">
                  <el-input @keyup.enter.native="submitForm('form1')" v-model="form1.phone"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="0">
                <el-form-item label="邮箱" prop="email">
                  <el-input @keyup.enter.native="submitForm('form1')" v-model="form1.email"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="0">
                <el-form-item label="QQ号码" prop="QQ">
                  <el-input @keyup.enter.native="submitForm('form1')" v-model="form1.QQ"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="0">
                <el-form-item label="用户等级"  prop="usertyp">
                  <el-select class="select-demo" disabled v-model="form1.usertyp" placeholder="性别">
                    <el-option label="超级管理员" value="超级管理员"></el-option>
                    <el-option label="普通用户" value="普通用户"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="0">
                <el-form-item label="住址" prop="address">
                  <el-input @keyup.enter.native="submitForm('form1')" v-model="form1.address"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item>
              <el-button type="primary" @click="submitForm('form1')">修改</el-button>
            </el-form-item>
          </el-form>

          <!-- 修改密码部分 -->
          <el-form v-else ref="pwdForm" :rules="pwdRules" :model="pwdForm" label-width="80px">
            <el-form-item label="原密码" prop="oldPwd">
              <el-input
                @keyup.enter.native="pwdSubmit('pwdForm')"
                v-model="pwdForm.oldPwd"
                placeholder="请输入原密码"
              ></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPwd">
              <el-input
                @keyup.enter.native="pwdSubmit('pwdForm')"
                v-model="pwdForm.newPwd"
                placeholder="请输入新密码"
              ></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="newPwd1">
              <el-input
                v-model="pwdForm.newPwd1"
                @keyup.enter.native="pwdSubmit('pwdForm')"
                placeholder="请再次输入输入新密码"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="pwdSubmit('pwdForm')">修改</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 头像路径
      src: "",
      // 个人信息表单
      form: undefined,
      // 修改信息表单
      form1: undefined,
      // 修改信息模块的导航栏显示
      index: "1",
      // 提交表单之前判断两个form的数据是否相同,相同则代表用户未修改信息,不发请求
      isSame: true,
      // 修改密码的表单
      pwdForm: {
        oldPwd: undefined,
        newPwd: undefined,
        newPwd1: undefined,
      },
      // 表单校验规则(修改基本信息)
      rules: {
        username: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        phone: [{ message: "请输入电话号码", trigger: "blur" }],
        email: [{ message: "请输入邮箱", trigger: "blur" }],
        QQ: [{ message: "请输入QQ", trigger: "blur" }],
        address: [{ message: "请输入地址", trigger: "blur" }],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        usertyp: [
          { required: true, message: "请选择用户等级", trigger: "change" },
        ],
      },
      // 表单校验规则(修改密码)
      pwdRules: {
        oldPwd: [
          { required: true, message: "原密码不能为空", trigger: "blur" },
        ],
        newPwd: [
          { required: true, message: "新密码不能为空", trigger: "blur" },
        ],
        newPwd1: [
          { required: true, message: "新密码不能为空", trigger: "blur" },
        ],
      },
    };
  },

  created() {
    this.getDetail();
  },
  methods: {
    // 获取用户详细信息
    getDetail() {
      this.gGet("/user/getDetail", {
        userid: sessionStorage.getItem("loginMsg"),
      }).then((res) => {
        this.form = res.data[0];
        console.log(res.data);
        this.src = res.data[0].avatar;
        // 防止两个表单指向一个内存地址(丐版深拷贝)
        this.form1 = JSON.parse(JSON.stringify(res.data[0]));
      });
    },

    // 提交表单(修改详细信息)
    submitForm(formName) {
      // 进行表单验证
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 验证成功后循环比较两个表单是否有差异
          for (const key in this.form1) {
            // 如果有差异,则isSame=false ,跳出循环
            if (this.form[key] != this.form1[key]) {
              this.isSame = false;
              break;
            }
          }
          // 只有isSame==false的时候,才能发送修改的请求
          if (!this.isSame) {
            // 将sessionStorage中的id信息存入表单传给后台
            this.form1.userid = sessionStorage.getItem("loginMsg");
            this.gGet("/user/updateDetail", this.form1)
              .then((res) => {
                if (res.data.code === "1") {
                  this.$message({
                    message: res.data.msg,
                    type: "success",
                  });
                  this.getDetail();
                } else {
                  this.$message.error(res.data.msg);
                }
              })
              .catch(() => {});
          } else {
            // 如果两个表单的数据是一样的,则表示用户未进行修改
            this.$message.error("您未做任何修改哦");
          }
          this.isSame = true;
        } else {
          return false;
        }
      });
    },

    // 提交表单(修改密码)
    pwdSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 校验成功后判断两次新密码是否一致
          if (this.pwdForm.newPwd != this.pwdForm.newPwd1) {
            this.$message.error("两次输入的密码不一致!");
          } else {
            // 将本地存储的用户id信息放到表单中传给后台
            this.pwdForm.userid = sessionStorage.getItem("loginMsg");
            this.gGet("/user/updatePwd", this.pwdForm).then((res) => {
              if (res.data.code == 0) {
                this.$message.error(res.data.msg);
              } else if (res.data.code == 1) {
                this.$message({
                  message: res.data.msg,
                  type: "success",
                });
                // 密码修改成功后需要跳转到首页重新登录
                setTimeout(() => {
                  this.$router.push("/");
                }, 500);
              }
            });
          }
        } else {
          return false;
        }
      });
    },

    handleSelect(key) {
      this.index = key;
    },
  },
};
</script>
<style scoped>
.user-info-container {
  width: 100%;
  text-align: center;
}
.avatar-container {
  margin-bottom: 10px;
}

.select-demo {
  width: 100%;
}
.el-menu-demo {
  margin-bottom: 20px;
}
</style>